$(function(){
    // 获取到裁剪区域的DOM 元素
    const $image = $("#image")
    // 定义初始化的 配置项
    const options = {
        // 指定纵横比
        aspectRatio:1,
        // 指定预览区域
        preview:'.img-preview'
    }
    // 把指定的 DOM 元素，按照 options 提供的配置，初始化一个裁剪区域
    $image.cropper(options)

    // 为选择文件的按钮绑定点击事件
    $('#btnChooseImg').on('click',function(){
        $('#file').click()
    })

    // 监听文件选择框的 change 事件
    $('#file').on('change',function(e){
        // e.target 指向事件的触发源(触发事件的那个 DOM 对象)
        const files = e.target.files
        if(files.length === 0) return
        // 根据选择的文件，创建一个对应的 URL 地址：
        const imgURL = URL.createObjectURL(files[0])

        // 先销毁旧的裁剪区域，
        $image.cropper('destroy')
        // 再重新设置图片路径，
        $image.attr('src',imgURL)
        // 之后再创建新的裁剪区域：
        $image.cropper(options)
    })

    // 为上传按钮绑定 点击事件
    $('#btnUploadImg').on('click',function(){
        // 获取到 格式为 base64 的图片
        const base64Img = $image.cropper('getCroppedCanvas', { // 创建一个 Canvas 画布
        width: 100,
        height: 100
      }).toDataURL('image/png')
    //   发起请求，更换用户的头像
    $.post('/my/update/avatar',{avatar:base64Img},function(res){
        if(res.status === 0){
            // 上传头像成功
            // 刷新父窗口中的头像
            window.parent.getUserInfo()
        }
        // 提示用户更换头像的状态
        layer.msg(res.message)
    })
    })

})